import React from "react";
import {Image, StyleSheet, View, WebView} from "react-native";
import HTMLView from "react-native-htmlview";
import {width} from '../../config'

function renderNode(node, index, siblings, parent, defaultRenderer) {
  if (node.name === "img") {
    const a = node.attribs;
    return (
      <Image
        key={index}
        style={{ width: 300, height: 300 }}
        source={{ uri: a.src }}
      />
    );
  } else if (node.name === 'iframe') {
    const a = node.attribs;
    const iframeHtml = `<iframe src="${a.src}"></iframe>`;
    return (
      <View key={index} style={{width: width}}>
        <WebView source={{html: iframeHtml}}/>
      </View>
    );
  }
}
const ContentView = ({ content }) => {
  return (
    <HTMLView value={content} stylesheet={styles} renderNode={renderNode} />
  );
};

const styles = StyleSheet.create({
  a: {
    fontWeight: "300",
    color: "#FF3366" // make links coloured pink
  }
});

export default ContentView;
